<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>添加节点</h1>
		<div id="div01">
			<p>内容1</p>
			<p>内容</p>
			
		</div>
		
		<input id="input1" type="text"/>
		<input  type="button" onclick="add()" value="添加"/>
		
		
		<script>
			
			function add()
			{
				// 1. 创建一个p标签节点
				var tmpP    = document.createElement("p");
				// 2. 创建一个文本节点
				var txtNode = document.createTextNode(input1.value);
				// 3. 将文本放入p标签节点
				tmpP.appendChild(txtNode);
				// 4. 将tmpP放入div01
				div01.appendChild(tmpP);
				
			}
			
			
		</script>
		
		<h1>删除节点</h1>
		<ul id="ul01">
			<li>内容1 <a href="javascript:">删除</a></li>
			<li>内容2 <a href="javascript:">删除</a></li>
			<li>内容3 <a href="javascript:">删除</a></li>
			<li>内容4 <a href="javascript:">删除</a></li>
		</ul>
		
		<script>
			
			// 找到所有的a标签
			var aArrs = document.getElementsByTagName("a");
			for(var i in aArrs)
			{
				// 给a标签添加点击事件
				aArrs[i].onclick = function()
				{
					// this 触发这个事件对象  是链接
					ul01.removeChild(this.parentElement);
				}
			}
			
			
		</script>
		
		
		
	</body>
</html>